<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Gravatar - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Gravatar</a></li>
                    <li class="toc-entry"><a href="#_gravatar_how_to">How to</a></li>
                    <li class="toc-entry"><a href="#_gravatar_size">Gravatar size</a></li>
                    <li class="toc-entry"><a href="#_gravatar_default">Defaults</a></li>
                    <li class="toc-entry"><a href="#_gravatar_runtime">Runtime</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Gravatar</h1>
                <p class="text-leader">
                    Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums.
                </p>

                <!-- ads-html -->

                <p class="remark info">
                    Read more about Gravatar on the <a href="https://en.gravatar.com/">official website</a>.
                </p>

                <h3 id="_gravatar_how_to">How to</h3>
                <p>
                    Setting up Gravatars on your site with Metro 4 is simple and easy.
                </p>
                <div class="example">
                    <div class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua"></div>
                    <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua">
                </div>
                <pre class=""><code>
                    &lt;div data-role="gravatar" data-email="sergey@pimenov.com.ua"&gt;&lt;/div&gt;
                    &lt;img data-role="gravatar" data-email="sergey@pimenov.com.ua"&gt;
                </code></pre>

                <h3 id="_gravatar_size">Gravatar size</h3>
                <p>
                    By default, images are presented at 80px by 80px.
                    You may request a specific image size, which will be dynamically delivered from Gravatar by using add attribute <code>data-size=value</code> where value is your size in pixels.
                </p>
                <div class="example">
                    <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="40">
                    <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="80">
                    <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="120">
                    <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="160">
                    <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="200">
                </div>
                <pre class=""><code>
                    &lt;img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="40"&gt;
                    &lt;img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="80"&gt;
                    &lt;img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="120"&gt;
                    &lt;img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="160"&gt;
                    &lt;img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="200"&gt;
                </code></pre>
                <p>
                    You may request images anywhere from <strong>1px up to 2048px</strong>, however note that many users have lower resolution images, so requesting larger sizes may result in pixelation/low-quality images.
                </p>

                <!-- ads-html -->

                <h3 id="_gravatar_default">Gravatar defaults</h3>
                <p>
                    What happens when an email address has no matching Gravatar image?
                    Gravatar has a number of built in options which you can also use as defaults.
                    Most of these work by taking the requested email hash and using it to generate a themed image that is unique to that email address.
                    To use these options, just pass one of the following keywords as the <code>data-default</code>attribute to an image request:
                </p>
                <ul>
                    <li><strong>404</strong>: do not load any image if none is associated with the email hash, instead return an HTTP 404 (File Not Found) response</li>
                    <li><strong>mp</strong>: (mystery-man) a simple, cartoon-style silhouetted outline of a person (does not vary by email hash)</li>
                    <li><strong>identicon</strong>: a geometric pattern based on an email hash</li>
                    <li><strong>monsterid</strong>: a generated 'monster' with different colors, faces, etc</li>
                    <li><strong>wavatar</strong>: generated faces with differing features and backgrounds</li>
                    <li><strong>retro</strong>: awesome generated, 8-bit arcade-style pixelated faces</li>
                    <li><strong>blank</strong>: a transparent PNG image (border added to HTML below for demonstration purposes)</li>
                </ul>
                <div class="example">
                    <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="mp">
                    <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="identicon">
                    <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="monsterid">
                    <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="wavatar">
                    <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="retro">
                    <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="robohash">
                    <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="blank">
                </div>
                <pre class=""><code>
                    &lt;img data-role="gravatar" data-email="a@b.com" data-default="mp"&gt;
                    &lt;img data-role="gravatar" data-email="a@b.com" data-default="identicon"&gt;
                    &lt;img data-role="gravatar" data-email="a@b.com" data-default="monsterid"&gt;
                    &lt;img data-role="gravatar" data-email="a@b.com" data-default="wavatar"&gt;
                    &lt;img data-role="gravatar" data-email="a@b.com" data-default="retro"&gt;
                    &lt;img data-role="gravatar" data-email="a@b.com" data-default="robohash"&gt;
                    &lt;img data-role="gravatar" data-email="a@b.com" data-default="blank"&gt;
                </code></pre>

                <h4>Your own default image</h4>
                <p>
                    If you'd prefer to use your own default image (perhaps your logo, a funny face, whatever),
                    then you can easily do so by supplying the URL to an image in the <code>data-default</code> attribute.
                    The URL should be URL-encoded to ensure that it carries across correctly.
                    Your own default image will returned in original size.
                </p>
                <div class="example">
                    <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="https://metroui.org.ua/images/jeki_chan.jpg">
                </div>
                <pre class=""><code>
                    &lt;img data-role="gravatar"
                        data-email="a@b.com"
                        data-default="https://metroui.org.ua/images/jeki_chan.jpg"&gt;
                </code></pre>
                <p>
                    When you include a default image, Gravatar will automatically serve up that image if there is no image associated with the requested email hash. There are a few conditions which must be met for default image URL:
                </p>
                <ul>
                    <li>MUST be publicly available (e.g. cannot be on an intranet, on a local development machine, behind HTTP Auth or some other firewall etc). Default images are passed through a security scan to avoid malicious content.</li>
                    <li>MUST be accessible via HTTP or HTTPS on the standard ports, 80 and 443, respectively.</li>
                    <li>MUST have a recognizable image extension (jpg, jpeg, gif, png)</li>
                    <li>MUST NOT include a querystring (if it does, it will be ignored)</li>
                </ul>

                <h3 id="_gravatar_runtime">Runtime</h3>
                <p>
                    You can change atributes at runtime and Gravatar plugin change same values.
                </p>
                <div class="example">
                    <form action="javascript:void(0)" onsubmit="getGravatar(this)" class="d-flex mb-2">
                        <input type="number" placeholder="Enter gravatar size" name="gravatar_size">
                        <button class="button">Get image</button>
                    </form>
                    <img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-default="404" id="gravatar_runtime_demo_1">
                </div>
                <pre class=""><code>
                    &lt;form action="javascript:void(0)" onsubmit="getGravatar(this)"&gt;
                        &lt;input type="number" placeholder="Enter gravatar size" name="gravatar_size"&gt;
                        &lt;button class="button"&gt;Get image&lt;/button&gt;
                    &lt;/form&gt;

                    &lt;img data-role="gravatar" data-email="sergey@pimenov.com.ua"
                         data-default="404" id="gravatar_runtime_demo_1"&gt;

                    &lt;script&gt;
                        function getGravatar(f){
                            var val = Number(f.elements['gravatar_size'].value);
                            var size = val !== "" && Metro.utils.isInt(val) ? val : 0;
                            console.log(size);
                            $('#gravatar_runtime_demo_1').attr('data-size', size);
                        }
                    &lt;/script&gt;
                </code></pre>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>

    <script>
        function getGravatar(f){
            var val = Number(f.elements['gravatar_size'].value);
            var size = val !== "" && Metro.utils.isInt(val) ? val : 0;
            $('#gravatar_runtime_demo_1').attr('data-size', size);
        }
    </script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>